<template>
  <div class="app-container">
    <el-row style="margin-left: 0">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="姓名">
          <el-select v-model="queryParams.id" placeholder="请选择" style="width: 200px">
            <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="post">
          <el-select v-model=" queryParams.post" placeholder="请选择" style="width: 200px" >
            <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postName" :disabled="item.status == 1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          <el-tree-select
            v-model=" queryParams.dept"
            :data="deptOptions"
            :props="{ value: 'label', label: 'label', children: 'children' }"
            value-key="id"
            placeholder="请选择归属部门"
            check-strictly
            style="width: 200px"
 
          />
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="queryParams.date" type="date" placeholder="请选择" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>
    <el-table :data="tableData">
      <el-table-column v-for="obj in tableHeader" :label="obj.label" :prop="obj.prop" align="center">
        <template #default="{ row }">
          <span v-if="obj.prop == 'signInStatus'">
            <el-tag :type="row.signInStatus === '1' ? 'primary' : 'danger'">
              {{ row.signInStatus === "1" ? "正常" : "迟到" }}
            </el-tag>
          </span>
          <span v-else-if="obj.prop == 'signOutStatus'">
            <el-tag :type="row.signOutStatus === '1' ? 'primary' : 'danger'">
              {{ row.signOutStatus === "1" ? "正常" : "缺卡" }}
            </el-tag>
          </span>
          <span v-else>
            {{ row[obj.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalNum > 0" :total="totalNum" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup lang="ts">
import { getAttendanceData, getUserList } from "@/api/personnelManagement";
import { getUser, deptTreeSelect } from "@/api/system/user";

import { reactive, ref } from "vue";
const showSearch = ref(true);
const totalNum = ref(0);
const tableData = ref([]);
const userOptions = ref([]) as any;
const deptOptions = ref([]) as any;
const postOptions = ref([]) as any;
const queryParams = reactive({
  date: "",
  dept: "",
  id: "",
  post: "",
  pageNum: 1,
  pageSize: 10,
});
const tableHeader = ref([
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "部门",
    prop: "dept",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "职务",
    prop: "post",
  },
  {
    label: "签到状态",
    prop: "signInStatus",
  },
  {
    label: "签到时间",
    prop: "signInTime",
  },
  {
    label: "签退状态",
    prop: "signOutStatus",
  },
  {
    label: "签退时间",
    prop: "signOutTime",
  },
]);
const getList = async () => {
  const { rows, code, total } = await getAttendanceData(queryParams);
  if (code === 200) {
    tableData.value = rows;
    totalNum.value = total;
  }
};
getList();
const getUserLists = async () => {
  const { data, code } = await getUserList();
  if (code == 200) {
    userOptions.value = data;
  }
};
getUserLists();
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data;
  });
  getUser().then((response) => {
    postOptions.value = response.posts;
  });
}
getDeptTree();
const resetQuery = () => {
  Object.keys(queryParams).map(key=>{
    queryParams[key]=""
  })
  queryParams.pageNum=1
  queryParams.pageSize=10
  getList()
};

</script>

<style scoped></style>
